<template>
  <div class="container">
    <div class="m-b-20">
      <el-select v-model="selectedProduct" placeholder="请选择农产品" style="width: 200px; margin-right: 20px">
        <el-option v-for="item in productList" :key="item" :label="item" :value="item" />
      </el-select>
      <el-select v-model="selectedGranularity" placeholder="请选择时间粒度" style="width: 200px">
        <el-option label="月" value="month" />
        <el-option label="季度" value="quarter" />
        <el-option label="年" value="year" />
      </el-select>
    </div>
    <div ref="chart" class="chart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  data() {
    return {
      selectedProduct: '',
      selectedGranularity: 'month',
      productList: ['苹果', '西红柿', '大米', '玉米'],
      mockData: {
        苹果: {
          month: [
            { time: '2024-01', price: 5.2 },
            { time: '2024-02', price: 5.5 },
            { time: '2024-03', price: 5.8 },
            { time: '2024-04', price: 6.0 },
            { time: '2024-05', price: 6.2 }
          ],
          quarter: [
            { time: '2024Q1', price: 5.5 },
            { time: '2024Q2', price: 6.1 }
          ],
          year: [
            { time: '2023', price: 5.0 },
            { time: '2024', price: 6.1 }
          ]
        },
        西红柿: {
          month: [
            { time: '2024-01', price: 3.2 },
            { time: '2024-02', price: 3.5 },
            { time: '2024-03', price: 3.8 },
            { time: '2024-04', price: 4.0 },
            { time: '2024-05', price: 4.2 }
          ],
          quarter: [
            { time: '2024Q1', price: 3.5 },
            { time: '2024Q2', price: 4.1 }
          ],
          year: [
            { time: '2023', price: 3.0 },
            { time: '2024', price: 4.1 }
          ]
        },
        // 其他产品同理
      }
    }
  },
  watch: {
    selectedProduct: 'drawChart',
    selectedGranularity: 'drawChart'
  },
  mounted() {
    this.selectedProduct = this.productList[0]
    this.drawChart()
  },
  methods: {
    drawChart() {
      if (!this.selectedProduct) return
      const chart = echarts.init(this.$refs.chart)
      const data = this.mockData[this.selectedProduct][this.selectedGranularity]
      const option = {
        title: {
          text: '农产品不同时期价格分布',
          left: 'center',
          textStyle: { fontSize: 30 }
        },
        tooltip: { trigger: 'axis' },
        xAxis: { type: 'category', data: data.map(d => d.time) },
        yAxis: { type: 'value', name: '价格(元)' },
        series: [
          {
            name: '价格',
            type: 'line',
            data: data.map(d => d.price),
            smooth: true
          }
        ]
      }
      chart.setOption(option)
    }
  }
}
</script>
<style lang='scss' scoped>
.container {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
}

.chart {
  width: 100%;
  height: 100%;
  min-height: 300px; /* 设置最小高度，避免图表内容过少时显示不全 */
}
</style>
